<!DOCTYPE html>

<html>
    <head>
        <title>sssweb-模板代码生成</title>
        <meta charset="utf-8">
        <style>
        	body { margin:0; font-family:Simsun;}
        	.content { width:950px; height:500px; border:1px solid; margin:0 auto; padding:12px 45px 0;}
        	.line { margin-bottom:8px;}
        	#typeSelect{ width:110px; height:20px; margin-right:20px;}
        	#functionSelect{ width:280px; height:20px; margin-right:30px;}
        	.text { width:280px; height:20px; }
        	.div1 { width:460px; height:480px; float:left;}
        	.textarea1{width:440px; height:280px; white-space:nowrap;}
        	.textarea2 { width:440px; height:132px; white-space:nowrap;}
        	#codeDiv{ float:left; width:480px; height:430px; margin-bottom:20px;}
        	#codeDiv pre { margin-top:0;}
        </style>
        <script src="/sssweb2/public/ace-editor/ace.js"></script>
		<script src="/sssweb2/public/ace-editor/mode-php.js"></script>
		<script src="/sssweb2/public/ace-editor/theme-eclipse.js"></script>
        <script src="/sssweb2/public/javascripts/ZeroClipboard.js"></script>
        <script src="/sssweb2/public/javascripts/utils.js"></script>
        <script>
        	window.onload=function(){
        		//ace编辑器
        		var editor1 = createEditor('textarea1');
        		var editor2 = createEditor('textarea2',true);
        		var editor3 = createEditor('codeDiv');
        		
        		var oTypeSelect = document.getElementById('typeSelect');
        		var oFunctionSelect = document.getElementById('functionSelect');
        		
        		//获取所有类型
        		var url = '/sssweb2/StringHandleController/getAllType.do';
    			ajax(url,null,function(str){
    				if(str){
	    				//将模板添加到选项中
	    				var arr = JSON.parse(str);
	    				for(var i=0;i<arr.length;i++){
	    					var oOption = document.createElement('option');
	    					oOption.innerHTML = arr[i];
	    					oOption.value = arr[i];
	    					oTypeSelect.appendChild(oOption);
	    				}
	    				oTypeSelect.onchange();
    				}
    			});
    			//当选择类型时,获取指定类型的远程项目
    			oTypeSelect.onchange = function(){
    				oFunctionSelect.innerHTML = '<option></option>';
            		var url = '/sssweb2/StringHandleController/getTempletListByType.do';
            		var params = 'type='+oTypeSelect.value;
        			ajax(url,params,function(str){
        				if(str){
    	    				//将模板添加到选项中
    	    				var arr = JSON.parse(str);
    	    				for(var i=0;i<arr.length;i++){
    	    					var oOption = document.createElement('option');
    	    					oOption.innerHTML = arr[i].name;
    	    					oOption.value = JSON.stringify(arr[i]);
    	    					oFunctionSelect.appendChild(oOption);
    	    				}
    	    				//加载第一次选择的模板和参数示例
    	    				oFunctionSelect.onchange();
        				}
        			});
    			}
        		
    			//当选择模板时,加载模板内容
        		oFunctionSelect.onchange = function(){
    				if(oFunctionSelect.value){
	        			var string = JSON.parse(oFunctionSelect.value);
	        			editor2.setContentValue(string.code);
	        			
	        			//修改父页面的input的value
	        			var parentODiv = window.parent.document.getElementsByTagName('div')[0];
	        			var aDiv = parentODiv.getElementsByTagName('div');
	        			for(var i=0;i<aDiv.length;i++){
		        			if(aDiv[i].className.indexOf('active')!=-1){
		        				parentODiv.getElementsByTagName('input')[i].value = this.options[this.selectedIndex].text;
		        			}
	        			}
    				}
        		}
        		
        		var oBtn = document.getElementById('btn');
        		oBtn.onclick = function(){
        			if(!editor1.getContentValue()){
        				alert('模板不能为空');
        				return false;
        			}
        			if(!editor2.getContentValue()){
        				alert('请选择功能');
        				return false;
        			}
        			
        			editor3.setContentValue('');
        			
        			var url = '/sssweb2/StringHandleController/generation.do';
        			var param = "text="+encodeURIComponent(editor1.getContentValue(),"utf-8");
        			param += "&code="+encodeURIComponent(editor2.getContentValue(),"utf-8");
        			ajax(url,param,function(str){
        				editor3.setContentValue(str);
        			});
        		}
        		
        		//复制结果
				copy('copy',function(){
					return editor3.getContentValue();
				});
        	}
        </script>
    </head>
    <body>
    	<div class="content">
    		<div class="line">
	    		类型: <select id="typeSelect"><option value="">全部</option></select>
	    		功能: <select id="functionSelect"></select>
	    		<input id="btn" type="button" value="生成">
   				<input id="copy" type="button" value="复制结果">
    		</div>
   			<div class="div1">
	   			文本:<br>
	   			<div id="textarea1" class="textarea1"></div>
	   			代码:<br>
	   			<div id="textarea2" class="textarea2"></div>
   			</div>
   			结果:<br>
   			<div id="codeDiv"></div><br>
    	</div>
    </body>
</html>